<template>
	<div class="my-container">
		<div class="toLogin" v-if="isLogin">
			<p>登录后头条更懂你, 内容更有趣</p>
			<img :src="require('@/assets/logo.png')" alt="" />
			<van-button type="danger" color="#ec4243" @click="$router.push('/login')"
				>点击登录头条</van-button
			>
		</div>
		<div class="profile" v-else>
			<div class="top">
				<van-image
					class="avatar"
					round
					width="80"
					height="80"
					fit="cover"
					src="https://img01.yzcdn.cn/vant/cat.jpeg"
				/>
				<van-button type="default" size="mini" round>编辑资料</van-button>
			</div>
			<div class="bottom">
				<div class="item">
					<span>8</span>
					<span>头条</span>
				</div>
				<div class="item">
					<span>8</span>
					<span>关注</span>
				</div>
				<div class="item">
					<span>8</span>
					<span>粉丝</span>
				</div>
				<div class="item">
					<span>8</span>
					<span>收藏</span>
				</div>
			</div>
			<!-- 收藏 -->
			<div class="myicon">
				<div class="item">
					<van-icon name="star-o" />
					<span>收藏</span>
				</div>
				<div class="item">
					<van-icon name="underway-o" />
					<span>历史</span>
				</div>
			</div>
			<van-cell title="消息通知" is-link></van-cell>
			<van-cell title="小智同学" is-link></van-cell>
			<van-button type="default" @click="logout">退出登录</van-button>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {}
	},
	computed: {
		isLogin() {
			return this.$store.getters.token === ''
		}
	},
	methods: {
		logout() {
			this.$dialog
				.confirm({
					title: '退出登录',
					message: '你确定要退出吗'
				})
				.then(() => {
					this.$store.commit('user/logout')
					this.$router.push('/login')
				})
				.catch(() => {
					// on cancel
				})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep.toLogin {
	margin-top: 100px;
	height: 450px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	p {
		font-size: 32px;
	}

	img {
		width: 150px;
	}
	.van-button {
		width: 400px;
		height: 80px;
	}
}

.profile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-image: url('~@/assets/banner.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding-top: 50px;

	.top {
		display: flex;
		flex: 1;
		justify-content: space-between;
		align-items: center;
		padding: 0 30px;
		.avatar {
			border: 2px solid #ddd;
		}
	}
	.bottom {
		height: 132px;
		padding: 0 60px;
		color: #fff;
		display: flex;
		font-size: 32px;
		justify-content: space-between;
		align-items: center;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			span:first-child {
				font-size: 36px;
			}
		}
	}
	.myicon {
		height: 140px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		font-size: 28px;
		margin-bottom: 20;
		.item {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		i {
			font-size: 50px;
			margin-bottom: 10px;
			color: #ee7374;
		}
	}
}
</style>
